<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网上商城</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		nav{
			width: 100%;
			height: 40px;
			background: darkred;
			overflow: hidden;
		}
		nav ul li{
			list-style: none;
			float: left;
			width: 13%;
			text-align: center;
			font-weight: bold;
			line-height: 37px;
			font-family: "微软雅黑";
		}
		nav li:hover{
			width: 13%;
			height: 40px;
            background-color: red;
		}
		nav li:hover a{
			color:#202020;
		}
		nav li a{
			width: 100%;
			height: 100px;
			display: inline-block;
			text-decoration: none;
			color: #fff;
		}
 		.current{
 			background-color: red;
 		}


 		#search{
			width: 550px;
			height: 35px;
			margin: 50px auto;
		}
		#search input{
			width: 494px;
			height: 33px;
			border: 1px solid #FF0000;
			outline-style: none;
			float: left;
			padding-left:4px;
			color: #888;
			font-size: 14px;
			font-family: "微软雅黑";
		}
		#search button{
			width: 50px;
			height: 35px;
			border:0px;
			background-color: #8B0000;
			float: left;

		}
		.featured{
			width: 1190px;
			margin: 0 auto;
			margin-top: 30px;
		}
		.title{
			font-size: 28px;
			padding: 10px 4px;
			border-bottom: 4px solid #f23030;
		}
		.tit_1{
			color: #e92a2f;
			font-weight: bold;
		}
		.more{
			font-size: 14px;
			color: #899198;
			float: right;
			cursor: pointer;
			position: relative;
			top: 18px;
			margin-right: 14px;
		}
		.more a{
			list-style: none;
		}
		.row{
			padding-top: 10px;
			overflow: hidden;
		}
		.detail{
			width: 25%;
			height: 297px;
			border: 1px solid #e6e6e6;
			padding:15px 15px 10px;
			box-sizing: border-box;
			float: left;
		}
		.pic{
			width: 210px;
			height: 210px;
			margin-left: 20px;
		}
		.pic img{
			width: 210px;
			height: 210px;
		}
		.price{
			font-size: 18px;
			color: #FF0036;
			line-height: 18px;
			margin-left: 20px;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.market{
			width:100%;
			height: 50px;
			overflow: hidden;
			background-color: darkred;
			margin-top: 30px;
		}
	</style>
	 <script src="js/slider.js"></script>
	 <link rel="stylesheet" href="css/slider.css">
</head>
<body>
		<nav>
		<ul>
			<li ><a href="index.html" title="" target="blank">首页</a></li>
			<li><a href="#" title="" target="blank">概况</a></li>
			<li><a href="#" title="" target="blank">旅游资讯</a></li>
			<li><a href="#" title="" target="blank">景区</a></li>
			<li class="current"><a href="#" title="" target="blank">商城</a></li>
			<li><a href="#" title="" target="blank">美食</a></li>
			<li><a href="#" title="" target="blank">交通</a></li>
		</ul>
	</nav>

  	 <div id="search">
		<input type="text" value="纪念品" id="sousuo"/>
		<button>搜索</button>
	</div>
	<script src="js/搜索框.js"></script>
	<div class="box" id="scroll">
    		<div class="slider" id="sl">
    			<ul id="sl_ul">
    				<li><img src="imgs/a.jpg" alt=""></li>
    				<li><img src="imgs/b.jpg" alt=""></li>
    				<li><img src="imgs/c.jpg" alt=""></li>
    				<li><img src="imgs/d.jpg" alt=""></li>
    				<li><img src="imgs/e.jpg" alt=""></li>
    			</ul>
    		</div>
    		
    		<ul class="scroll_nav" id="sc_nav">
    			<!-- <li class="current">1</li>
    							<li>2</li>
    							<li>3</li>
    							<li>4</li>
    							<li>5</li> -->
    		</ul>
    		<span class="arr arr_prev" id="prev"><</span>
    		<span class="arr arr_next" id="next">></span>
</div>
<div class="featured">
			<p class="title">
				<span class="tit_1">精</span>
				<span class="tit_2">选推荐</span>
				<a href="javascript:void(0)" class="more">查看更多></a>
			</p>
			<div class="row">
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian1.jpg" alt="">
					</div>
					<div class="price">￥15</div>
					<p><a href="商品详情.html">毛主席小茶缸老式小号陶瓷杯子</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian2.jpg" alt="">
					</div>
					<div class="price">￥15</div>
					<p><a href="">纪念孔子摆放物品</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian3.jpg" alt="">
					</div>
					<div class="price">￥50</div>
					<p><a href="">玻璃纪念物品漂亮简洁</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian4.jpg" alt="">
					</div>
					<div class="price">￥80</div>
					<p><a href="">纪念摆设祈福带来好运的当地祝福</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian5.jpg" alt="">
					</div>
					<div class="price">￥60</div>
					<p><a href="">纪念摆设古代建筑风灯塔小桥流水</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian6.jpg" alt="">
					</div>
					<div class="price">￥100</div>
					<p><a href="">纪念钢笔套件组合</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian7.jpg" alt="">
					</div>
					<div class="price">88</div>
					<p><a href="">纪念品挂件，仿古代稀有物品</a></p>
				</div>
				<div class="detail">
					<div class="pic">
						<img src="imgs/jinian8.jpg" alt="">
					</div>
					<div class="price">￥500</div>
					<p><a href="">古代陶瓷纪念品美轮美奂产品</a></p>
				</div>
			</div>
		</div>
			
		<div class="market"></div>
</body>
</html>